import React, {Component} from 'react';
import CommentAdd from "./components/comment-add/comment-add"
import CommentList from "./components/comment-list/comment-list"

class App extends Component {
    state = {
        comments: [
            {username: "Tom", content: "React 挺好的!"},
            {username: "Jack", content: "React 太难了!"}
        ]
    };
    addContent = (data) => {
        this.setState({
            comments: [data, ...this.state.comments]
        })
    };
    removeContent = (index) => {
        const {comments} = this.state;
        comments.splice(index,1);
        this.setState({comments});
    };

    render() {
        const {comments} = this.state;
        return (
            <div>
                <header className="site-header jumbotron">
                    <div className="container">
                        <div className="row">
                            <div className="col-xs-12">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd add={this.addContent}/>
                    <CommentList comments={comments} removeContent={this.removeContent}/>
                </div>
            </div>
        );
    }
}

export default App;